<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
    	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
    	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
		<title></title>
		<link href="/css/lanai-ui.css" rel="stylesheet" />
		<link rel="stylesheet" href="/plugins/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
	</head>
	<body>
		<section class="content no-padding">
			<div class="box box-widget no-shadow">
				<div class="box-body">
					<div id="toolbar" class="btn-group">
		                <div class="row">
							<div class="col-sm-12">
								<div class="form-group">
									<label for="demo-sm">用户名:</label>
									<input type="text" class="form-control input-sm" id="rolename" placeholder="请输入用户名">						
								</div>
							</div>
						</div>
						<div class="col-sm-12">
			
						<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#insertModal"  ><i class="fa fa-plus"></i>&nbsp;新增</button>
		            	<button type="button" id="queryButton" class="btn btn-primary">查询</button>
		           		 </div>
		            </div>
		         </div>            
					<table id="tb_users"></table>
				</div>
			</div>		
		</section>
			
	
<div class="myRoleModelOne">			
		<!-- 更改信息（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					更改信息
				</h4>
			</div>
			<div class="modal-body" >
				  <form action="" method="post">
				  	  <h5 class="modal-title" id="myModalLabel">
						更改角色
					  </h5>
				      <div class="form-group has-feedback">
				      <input type="text" id="loadrolename" class="form-control" disabled="disabled" placeholder="角色不可改">
				        <span class="fa fa-user form-control-feedback"></span>
				      </div>
			       	  <h5 class="modal-title" id="myModalLabel">
						更改菜单
					  </h5>
				      <div class="zTreeDemoBackground left">
				      	<ul id="treeDemo" class="ztree"></ul>
					  </div>
					  
				</from>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" id="updatecoloseModel" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" onClick="updateRoleMenu()">提交</button>
				<input type="hidden" id="editRoleId" value="0">
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
</div>

<div class="myRoleModelOne">			
		<!-- 部门信息（Modal） -->
<div class="modal fade" id="addDeptModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					选择部门信息
				</h4>
			</div>
			<div class="modal-body" >
				<div>
	   				<ul class="ztree" id="first_tree"></ul>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" id="coloseModel" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" onClick="updateUserInfo()">提交</button>
				<input type="hidden" id="editUserId" value="0">
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
</div>



<div class="myRoleModelOne">		
			<!-- 新增（insertModal） -->
<div class="modal fade" id="insertModal" tabindex="1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					新增
				</h4>
			</div>
			<div class="modal-body" >
				  <form action="" method="post">
				      <div class="form-group has-feedback">
				      <h5 class="modal-title" id="myModalLabel">
						新增角色名称
					  </h5>
				      <input type="text" id="addrolename" class="form-control" placeholder="请输入角色名称">
				      	<span class="fa fa-user form-control-feedback"></span><span id="adddeptnamemsg"></span>
				      </div>
				      <div class="zTreeDemoBackground left">
				      <h5 class="modal-title" id="myModalLabel">
						新增角色菜单
					  </h5>
				      	<ul id="addtreeDemo" class="ztree"></ul>
					  </div>
					  </br>
				      <div class="form-group has-feedback">
					  	<h5 class="modal-title" id="myModalLabel">
							新增角色备注
						</h5>
			   			<div class="form-group">
		                	<select class="form-control" id="deptselect">
		                		<option value='0'>管理组</option>
		                		<option value='1'>产品组</option>
		                		<option value='2'>用户组</option>
		                		
		                	</select>
		                </div>
					 </div>
				</from>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" id="insertcolose" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" onClick="insertRole()">提交</button>
				<input type="hidden" id="editUserId" value="0">
				<input type="hidden" id="addmenuid" value="0">
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>	
</div>	

		
	</body>
	<script src="/js/jquery.min.js"></script>
	<script src="/plugins/layer/layer.js"></script>
	<script type="text/javascript" src="/plugins/ztree/js/jquery.ztree.core.js"></script>
	<script type="text/javascript" src="/plugins/ztree/js/jquery.ztree.excheck.js"></script>
    <script src="/js/lanai-ui.js"></script>
    <script type="text/javascript">
    	$(function () {

    //1.初始化Table
    var oTable = new TableInit();
    oTable.Init();

    //2.初始化Button的点击事件
    var oButtonInit = new ButtonInit();
    oButtonInit.Init();
    
    //3.toolbar
		$("#queryButton").click(function(){
		$('#tb_users').bootstrapTable('refresh', {
				"rolename":$("#rolename").val()
			}
		);
		//toastr.info("按钮事件相应");
	})
});


var TableInit = function () {
    var oTableInit = new Object();
    //初始化Table
    oTableInit.Init = function () {
        $('#tb_users').bootstrapTable({
            url: '/sys/rolelist2',         //请求后台的URL（*）
            method: 'get',                      //请求方式（*）
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: true,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//传递参数（*）
            queryParamsType:'',
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: false,
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,     //是否显示刷新按钮
            showFullscreen:false,
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
//          height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "roleid",                     //每一行的唯一标，一般为主键列
            showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            columns: [{
                checkbox: true
            }, {
                field: 'rolename',
                title: '角色名称'
            }, {
                field: 'deptid',
                title: '部门ID'
            }, {
                field: 'remark',
                title: '备注'
            }, {
                field: 'createtime',
                title: '创建时间'
            }, {
                field: 'roleid',
                title: '操作',
                formatter: function(value, row, index){
                	  var id = value;
                    var result = "";
                    result += "<a href='javascript:;' class='btn btn-xs blue' data-toggle=\"modal\" data-target=\"#myModal\" onclick=\"loadViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span>编辑</a>";
                    result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span>删除</a>";
  		
                    return result;
                  }
            }]
        });
    };

    //得到查询的参数
    oTableInit.queryParams = function (params) {
        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
        	pageSize: params.pageSize,   //页面大小
            pageNumber: params.pageNumber,  //页码
            rolename:  $("#rolename").val(),
        };
        return temp;
    };
    return oTableInit;
};


var ButtonInit = function () {
    var oInit = new Object();
    var postdata = {};

    oInit.Init = function () {
        //初始化页面上面的按钮事件
    };

    return oInit;
};



function DeleteByIds(id){
	$.ajax({
		type:"post",
		url:"/sys/deleteRole",
		data:{"roleid":id},
		dataType:"json",
		success:function(ret){
			if(ret.code==0){
				toastr.info("删除成功");
				$("#coloseModel").click();
				$('#tb_users').bootstrapTable('refresh');					
				//window.location.href="./page/success.jsp";
			}else{
			  alert(ret.msg);
			}
		},
		error:function(e){
			alert("e:"+e);
		}
	});
}

//新增角色信息
function insertRole(){
	var treeObj = $.fn.zTree.getZTreeObj("addtreeDemo");
	var nodes = treeObj.getCheckedNodes(true);
	var mids = "";
	for(var i =0;i<nodes.length;i++){
		var m = nodes[i];
		mids+=m.id+",";
	}
	console.log("mids:"+mids);
	var rolename = $("#addrolename").val();
	var deptid = $("#adddeptid").val();
	var remark = $("#deptselect option:selected").val();
	var mid = $("#addmenuid").val();
	$.ajax({
		type:"post",
		url:"/sys/insertRole",
		data:{"rolename":rolename,"deptid":deptid,"remark":remark,"mid":mid,"mids":mids},
		dataType:"json",
		success:function(ret){
			if(ret.code==0){
				toastr.info("新增成功");
				$("#insertcolose").click();	
				$('#tb_users').bootstrapTable('refresh');
				//window.location.href="./page/success.jsp";
			}else{
			  alert(ret.msg);
			}
		},
		error:function(e){
			alert("e:"+e);
		}
		
	});
}

//onclick弹框--zTree加载部门
function addDept(){
	//data-toggle="modal" data-target="#insertRoleModal"
	$("#deptname").attr({"data-toggle":"modal","data-target":"#addDeptModal"});
}


function loadDeptData(idname){
	    var setting = {
    		check: {
				enable: true
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				onClick: zTreeOnClick   //onCheck
			}
		};
		
	    $.ajax({
	    	url:"/sys/queryMenuztree",
	    	type:"post",
	    	dataType:"json",
	    	data:{},
			success:function(ret){
				var tempdata = ret.data;
				$.fn.zTree.init($(idname), setting, tempdata);
			},
			error:function(e){
				alert("e:"+e);
			}
	    	
	    	
	    });		
}
//新增
loadDeptData("#addtreeDemo");
//修改前role信息显示
function loadViewById(id){
	var setting = {
    		check: {
				enable: true
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				onClick: zTreeOnClick   //onCheck
			}
		};
		var treeObj = $.fn.zTree.getZTreeObj("addtreeDemo");
		var nodes = treeObj.getCheckedNodes(true);
		var mids = "";
		for(var i =0;i<nodes.length;i++){
			var m = nodes[i];
			mids+=m.id+",";
		}
	    $.ajax({
	    	url:"/sys/loadRoleMenu",
	    	type:"post",
	    	dataType:"json",
	    	data:{"roleid":id,"mids":mids},
			success:function(ret){
				var tempdata = ret.data;
				var loadrole = ret.role;
				$("#loadrolename").val(loadrole.rolename);
				$("#editRoleId").val(id);
				
				$.fn.zTree.init($("#treeDemo"), setting, tempdata);
			},
			error:function(e){
				alert("e:"+e);
			}
	    	
	    	
	    });			
}
//修改
function updateRoleMenu(){
	var roleid = $("#editRoleId").val();
	var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
	var nodes = treeObj.getCheckedNodes(true);
	var mids = "";
	for(var i =0;i<nodes.length;i++){
		var m = nodes[i];
		mids+=m.id+",";
	}
	$.ajax({
    	url:"/sys/updateRoleMenu",
    	type:"post",
    	dataType:"json",
    	data:{"roleid":roleid,"mids":mids},
		success:function(ret){
			$("#updatecoloseModel").click();
			$('#tb_users').bootstrapTable('refresh');	
		},
		error:function(e){
			alert("e:"+e);
		}
    	
    	
    });
	
	
}

function zTreeOnClick(event, treeId, treeNode) {
   //alert(treeNode.id + ",treeId " +treeId+ "======="+treeNode.name);
   $("#addmenuname").val(treeNode.name);
   $("#addmenuid").val(treeNode.id);  
}

    </script>
</html>
